<template>
  <div class="content ">
    <div class="operation">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <router-link style="text-decoration: none" :to="{ name: 'newBlog', params: { isNew: true } }">
              <el-button type="primary" @click="" icon="el-icon-circle-plus-outline">
                添加博客
              </el-button>
            </router-link>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-input placeholder="请输入内容搜索当前页" v-model="searchTitle" class="input-with-select">
              <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
            </el-input>

          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-select v-model="selectTag" clearable placeholder="请选择">
<!--              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
              </el-option>-->
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="content " v-infinite-scroll="load" style="overflow:auto"> -->
    <div class="blog" v-for="(item, index) in searchBlog" :key="index">

      <div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="btns">
          <el-row>
            <router-link STYLE="text-decoration: none" :to="{ name: 'newBlog', params: { item: item, isNew: false } }">
              <el-button size="mini">
                修改博客
              </el-button>
            </router-link>
            <el-button @click="deleteById(item.id)" size="mini" type="warning">删除</el-button>
          </el-row>
        </div>
      </div>
      <div class="tag">
        <el-tag size="small" @close="close(item.id, everyTag.id)" closable v-for="everyTag in item.tag"
                :key="everyTag.name">
          {{ everyTag.name }}
        </el-tag>
      </div>
      <router-link style="text-decoration: none" :to="{ name: 'blogInfo', params: { itemBlog: item } }">
        <div class="blog-content" v-html="item.noImgContent">
          {{ item.noImgContent }}
        </div>
      </router-link>
      <div class="footer">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="6">
            <div class="grid-content bg-purple">创建时间:{{ item.createTime }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple" @click="operation(item)">{{ item.isCollection }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">更新时间:{{ item.updateTime }}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="page">
      <el-pagination :page-size="5" layout="prev, pager, next" @current-change="curChange" :total="total">
      </el-pagination>
    </div>
    <div>

    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      blogList: [],
      searchTitle: '',
      total: 0,
      page: 0,
      size: 10,
      uName: '',
      options: [],
      selectTag: '',
    }
  },
  created() {
    this.getBlogTagVoPage(this.page, this.size);
    this.getTag();
  },
  methods: {
    getBlogTagVoPage(page, size) {
      this.$api.getBlogTagVoPage({
        page: page,
        size: size
      }).then(res => {
        if (res.code === 200) {
          this.blogList = [];
          this.blogList = res.data.records;
          this.total = res.data.total;
          // console.log(res.data.total)
          let currentUser = localStorage.getItem("userid")
          for (let i = 0; i < this.blogList.length; i++) {
            this.blogList[i].noImgContent = this.blogList[i].content;
            this.blogList[i].noImgContent = this.blogList[i].noImgContent.replace(/<\/?(img)[^>]*>/gi, '');
            if (this.blogList[i].userId === currentUser) {
              this.blogList[i].isCollection = "已收藏";
            } else {
              this.blogList[i].isCollection = "收藏";
            }

          }

        }

      });

    },
    curChange(curPage) {
      // console.log(curPage);
      this.getBlogTagVoPage(curPage, 5)

    },
    //收藏操作
    operation(item) {
      if (item.isCollection === "收藏") {
        let curUser = localStorage.getItem("userid")
        // console.log("curUser:" + curUser)
        this.$api.insertUserBlog({
          blogId: item.id,
          userId: curUser
        }).then(res => {
          if (res.code === 200) {
            this.getBlogTagVoPage(this.page, this.size);
            return;
          }
        });
      } else {
        let curUser = localStorage.getItem("userid")
        this.$api.deleteUserById({
          bid: item.id,
          uid: curUser,
        }).then(res => {
          if (res.code === 200) {
            this.getBlogTagVoPage(this.page, this.size);
          } else {
            this.$message({
              message: '失败',
              type: 'error'
            });
          }
        });
      }

    },

    /**
     * 关闭标签 一条
     * @param {*} bid
     * @param {*} tid
     */
    close(bid, tid) {
      console.log(bid, tid)
      this.$api.deleteByTagId({
        blogId: bid,
        tagId: tid,
      }).then(res => {
        if (res.code === 200) {
          this.getBlogTagVoPage(this.page, this.size)
        } else {
          this.$message({
            message: '未知错误',
            type: 'error'
          });
        }
      });
    },
    /**
     * 根据 bid uid 删除 user_blog
     * @param {*} bid
     */
    deleteById(bid) {
      let uid = localStorage.getItem("userid");
      this.$api.deleteBlogOne({
        id: bid,
      }).then(res => {
        if (res.code === 200) {
          this.getBlogTagVoPage(this.page, this.size)
        } else {
          this.$message({
            message: '失败',
            type: 'error'
          });
        }
      });
    },
    /**
     * 得到tag列表
     */
    getTag() {
      this.$api.selectTag(
      ).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.options = res.data
        }
      });
    },
  },
  computed: {
    searchBlog: function () {
      var search = this.searchTitle;
        return this.blogList.filter(value => {
          return value.title.match(search);
        })
    },
/*    searchTag: function () {
      var tag = this.selectTag;
        return this.options.filter(value => {
          return value.name.match(tag);
        })


    }*/


  },


};
</script>
<style scoped lang="scss">
.blog {
  border-bottom: 1px solid rgba(0, 0, 0, 0.027);
  width: 95%;
  margin: auto;

  .title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;

  }

  .tag {
    margin-top: 10px;
  }

  .blog-content {
    width: 100%;
    height: 60px;
    // background-color: aqua;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 在第几行显示
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
  }

  .footer {
    text-align: center;
    font-size: 12px;
    color: rgba(5, 48, 48, 0.199);
  }

  .btns {
    float: right;
  }


}

.page {
  height: auto;
  margin-top: 20px;
  width: 500px;
}

.operation {
  width: 95%;
  margin: auto;
  border-bottom: 2px solid #909399;
  padding-top: 15px;

}
</style>
